<template>
    <div>
        <el-form-item label="卡片头部">
            <el-select filterable v-model="data.options.topLeftValue.name" @change="changeValue($event,'topLeftValue')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
            <div class="mt5"/>
            <el-select filterable v-model="data.options.topRightValue.name" @change="changeValue($event,'topRightValue')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item>
        <el-form-item label="卡片中间">
            <el-select filterable v-model="data.options.centerLeftValue.name" @change="changeValue($event,'centerLeftValue')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
            <div class="mt5"/>
            <el-select filterable v-model="data.options.centerLeftPer.name" @change="changeValue($event,'centerLeftPer')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
            <!-- <div class="mt5"></div>
            <el-select filterable v-model="data.options.centerRightValue" @change="changeValue($event,'centerRightValue')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select> -->
        </el-form-item>
        <el-form-item label="卡片底部">
            <div v-for="(item, index) in data.options.bottomValue" :key="index">
                第{{ index+1 }}项
                <el-select filterable v-model="item.num.name" @change="changeValue($event,'num',index+1)">
                    <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
                </el-select>
                <div class="mt5"/>
                <el-select filterable v-model="item.text.name" @change="changeValue($event,'text',index+1)">
                    <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
                </el-select>
            </div>
        </el-form-item>
    </div>
</template>
<script>
export default {
    name: 'BaseCard',
    props: {
        data: {
            type: Object
        },
        selectDict: {
            type: Array
        }
    },
    methods: {
        changeValue(value, name, index) {
            let obj = {}
            obj = this.selectDict.find((item) => {
                return item.code === value
            })
            if (index) {
                this.data.options.bottomValue[index - 1][name] = obj
            } else {
                this.data.options[name] = obj
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .mt5{
        width: 100%;
        height: 5px;
    }
</style>
